// default below 576px (Portrait Phones)
$breakpoint-sm: 576px; // Landscape Phones
$breakpoint-md: 768px; // Tablets
$breakpoint-lg: 992px; // Desktops
$breakpoint-xl: 1200px; // Large Desktops
$breakpoint-xxl: 1600px; // Extra Large Desktops
$breakpoint-vr: 500px; // Standalone VR Browsers

$transparent: transparent;
$transparent-hover: rgba(0, 0, 0, 0.08);
$transparent-pressed: rgba(0, 0, 0, 0.12);

$white: #FFFFFF;
$white-hover: #E7E7E7;
$white-pressed: #DBDBDB;

$lightgrey: #E7E7E7;
$lightgrey-hover: #F5F5F5;
$lightgrey-pressed: #DBDBDB;

$grey: #BBBBBB;
$grey-hover: #C7C7C7;
$grey-pressed: #ADADAD;

$darkgrey: #868686;
$darkgrey-hover: #949494;
$darkgrey-pressed: #7A7A7A;

$black: #000000;
$black-hover: #404040;
$black-pressed: #7A7A7A;

$red: #F5325C;
$red-hover: #F64B70;
$red-pressed: #F41A49;

$orange: #FF8500;
$orange-hover: #FF911A;
$orange-pressed: #E67800;

$green: #7ED320;
$green-hover: #8CDF2F;
$green-pressed: #72BE1D;

$blue: #12A4ED;
$blue-hover: #2AADEF;
$blue-pressed: #1094D5;

$purple: #7854F6;
$purple-hover: #8C6EF7;
$purple-pressed: #663DF5;

$overlay-color: rgba(0, 0, 0, 0.5);

$recessed-bg: #f9f9f9;

$yellow: #FFC000;

$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 20px;
$font-size-xl: 24px;
$font-size-2xl: 28px;

$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

$border-radius-regular: 8px;

$outline-width: 3px;

$spacing-2xs: 4px;
$spacing-xs: 8px;
$spacing-sm: 12px;
$spacing-md: 16px;
$spacing-lg: 20px;
$spacing-xl: 24px;
